/**
 * Created by Administrator on 2017/3/14.
 */
var Slider = require('../../../src/libs/slider');
var Advisory = require('../../../src/libs/advisory');
var HyperLink = require('../../../src/libs/hyperlink');
var Layer = require('../../../src/libs/layer');
var Calculator = require('../../../src/libs/calculator');
var Formitem = require('../../../src/libs/form-item');
var Button = require('../../../src/libs/button');
var Input = require('../../../src/libs/input');
var SeamlessScroll = require('../../../src/libs/seamless-scroll');
var Accumulative = require('../complex/accumulative');
var HotItem = require('../complex/hotItem');
var Question = require('../complex/question');
var Steps = require('../complex/steps');
var NewInvestList = require('../complex/newInvestList');
var NoticeScroller = require('../complex/noticeScroller');

var Root = React.createClass({
    getInitialState:function(){
        return {
            banners:PageDM.banners.value,
            projectList:PageDM.projectList.value,
            amount:PageDM.amount.value,
            questions:PageDM.questions.value,
            investment:PageDM.investment.value,
            notices:PageDM.notices.value,
            steps:PageDM.steps.value
        }
    },
    _handleClick: function () {
        this.refs.calculator.layerOpen();
    },
    _feedbackClick: function(){
        var PageDM = window.PageDM;
        this.refs[PageDM.feedback.dmbind].layerOpen();
    },
    componentDidMount:function(){
        var _this = this;
        var PageDM = window.PageDM;

        UEventHub.emit("pageLoad","hello world!");
        UEventHub.on('LayerOpen',function (v) {
            _this.refs[v].layerOpen();
        });
        UEventHub.on('LayerClose',function (v) {
            _this.refs[v].layerClose();
        });

        //轮播图
        UEventHub.on(PageDM.banners.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                banners:v
            })
        });
        //平台公告
        UEventHub.on(PageDM.notices.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                notices:v
            })
        });
        //推荐投资列表
        UEventHub.on(PageDM.projectList.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                projectList:v
            })
        });
        //累计数据
        UEventHub.on(PageDM.amount.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                amount:v
            })
        });
        //最新投资
        UEventHub.on(PageDM.investment.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                investment:v
            })
        });
        //常见问题
        UEventHub.on(PageDM.questions.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                questions:v
            })
        });
        //投资步骤
        UEventHub.on(PageDM.steps.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                steps:v
            })
        });
    },
    render: function () {
        var _this = this;

        //累计数据
        var _accumulative = {
            unit:_this.state.amount.unit,
            transaction:_this.state.amount.CumulativeTransactionAmount,
            produce:_this.state.amount.AccumulatedIncome
        };
        //推荐列表
        var _hot_item = {
            moreUrl:PageDM.URL.investList,
            list:_this.state.projectList
        };
        //常见问题
        var _question = {
            moreUrl:PageDM.URL.questions,
            list:_this.state.questions
        };
        var _steps = {
            list:_this.state.steps
        };

        //平台公告轮播
        var _noticeScroll = {
            notices: _this.state.notices,
            config: {
                speed: 20,  //滚动速度
                type: 2,    //1：无缝滚动，2：间歇滚动:只有向上滚动的场景
                stopTime: 3000  //间歇滚动停顿时间
            },
            moreUrl: PageDM.URL.notices
        }

        //最新投资
        var _newInvest = {
            list: _this.state.investment,
            config: {
                speed: 33,  //滚动速度
                type: 1    //1：无缝滚动，2：间歇滚动:只有向上滚动的场景
            }
        }

        return (
            <div>
                <div className="header">
                    <div className="top-bar fc-light">
                        <div className="container">
                            <span>服务热线：0816-2373017</span>
                            <span>服务时间：工作日 9:00-18:00</span>
                            <span className="nav-right">
                                <a href="登录注册/登录.html">登录</a>
                                <a href="登录注册/注册.html">注册</a>
                                <a href="帮助中心/平台介绍.html">帮助中心</a>
                                <a href="index.html">返回绵阳商业银行</a>
                            </span>
                        </div>
                    </div>
                    <div className="header-nav">
                        <div className="container">
                            <div className="logo f-left">
                                <a href="index.html"><img src="../images/logo.jpg" alt=""/> </a>
                                <a href="index.html"><img src="../images/logoe.jpg" alt="绵阳市商业银行富乐e宝"/> </a>
                            </div>
                            <div className="nav f-right">
                                <ul className="clearfix">
                                    <li><a href="index.html" className="current">首页</a></li>
                                    <li><a href="我要投资.html">我要投资</a></li>
                                    <li><a href="我要借款.html">我要借款</a></li>
                                    <li><a href="账户中心/我的账户.html">我的账户</a></li>
                                </ul>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="shadow"></div>
                    </div>
                </div>

                <div className="banner-warp">
                    <Slider>
                        <div className="ucs-slider-item active-item" style={{background: "url(../images/1/b0.jpg)  center 0 no-repeat"}}>
                            <div className="inner"></div>
                        </div>
                        <div className="ucs-slider-item" style={{background: "url(../images/1/b1.jpg)  center 0 no-repeat"}}>
                            <div className="inner"></div>
                        </div>
                        <div className="ucs-slider-item" style={{background: "url(../images/1/b3.jpg)  center 0 no-repeat"}}>
                            <div className="inner"></div>
                        </div>
                    </Slider>
                    <NoticeScroller data={_noticeScroll}/>
                </div>

                <div className="money-index-warp">
                    <div className="wrap fz-16">
                        <Accumulative data={_accumulative}/>
                        <div className="clear"></div>
                    </div>
                </div>
                <HotItem data={_hot_item}/>
                <div className="process-warp wrap">
                    <Steps data={_steps}/>
                    <div className="clear"></div>
                </div>
                <div className="wrap">
                    <NewInvestList data={_newInvest}/>
                    <Question data={_question}/>
                    <div className="clear"></div>
                </div>
                <div className="mod-feature wrap">
                    <ul className="fz-20">
                        <li className="f1"><img src="../images/1/fbg1.png" className="i1"/><img src="../images/1/fbg1-1.png" className="i2" alt="精选银行授信级优质项目，全程资信见证"/> 优选项目</li>
                        <li className="f2"><img src="../images/1/fbg2.png" className="i1"/> <img src="../images/1/fbg2-1.png" className="i2" alt="全国性股份制商业银行浙商银行为资金存管机构"/> 资金安全</li>
                        <li className="f3"><img src="../images/1/fbg3.png" className="i1"/><img src="../images/1/fbg3-1.png" className="i2" alt="信息在存储、传输过程中经过严格的加密处理"/>信息安全</li>
                        <li className="f4"><img src="../images/1/fbg4.png" className="i1"/><img src="../images/1/fbg4-1.png" className="i2" alt="24小时在线投资，支持多家银行卡在线支付"/>操作便捷</li>
                    </ul>
                </div>

                <div className="footer">
                    <div className="container">
                        <div className="footer-logo f-left">
                            <p className="logo-foot"><img src="../images/foot-logo.png" alt=""/></p>
                            <p className="txt">
                                2005－2013 绵阳市商业银行股份有限公司
                                <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备11013283123号</a>
                            </p>
                        </div>
                        <div className="footer-nav f-right">
                            <div className="col">
                                <h3>关于我们</h3>
                                <ul>
                                    <li><a href="帮助中心/平台介绍.html">平台介绍</a></li>
                                    <li><a href="帮助中心/名词解释.html">名词解释</a></li>
                                    <li><a href="帮助中心/联系我们.html">联系我们</a></li>
                                    <li><a href="帮助中心/服务协议.html">服务协议</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>安全保障</h3>
                                <ul>
                                    <li><a href="帮助中心/安全保障.html">项目安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">资金安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">信息安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">账户安全</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>帮助中心</h3>
                                <ul>
                                    <li><a href="帮助中心/投资操作指引.html">投资指引</a></li>
                                    <li><a href="帮助中心/融资操作指引.html">融资指引</a></li>
                                    <li><a href="帮助中心/平台公告.html">平台公告</a></li>
                                    <li><a href="javascript:;">常见问题</a></li>
                                </ul>
                            </div>
                            <div className="col col-service">
                                <p>客服专线<br/>0816-2373017</p>
                                <p>服务时间<br/>工作日9:00 - 18:00</p>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </div>
                </div>

                <Advisory>
                    <HyperLink className="note" text={<div><span className="icon-news"></span><span className="bg-icon circle"></span><p>消息</p></div>}/>
                    <HyperLink className="calculator open-calculator" text={<div><span className="icon-calculator"></span><p>计算器</p></div>} onclick={this._handleClick.bind(this)}/>
                    <HyperLink className="feedback open-feedback" text={<div><span className="icon-feedback"></span><p>意见反馈</p></div>} onclick={this._feedbackClick.bind(this)}/>
                </Advisory>

                <Calculator ref="calculator"/>

                <Layer ref={PageDM.feedback.dmbind} title="意见反馈" className="feedback-layer">
                    <div className="layer-feedback">
                        <p className="tips">你好，欢迎您对赢家e站投融资平台提出意见和建议，我们会努力改善和提升用户体验。</p>
                        <Formitem dmbind={PageDM.textarea.dmbind} className="textArea">
                            <textarea className="ucs-input-control" placeholder="请写下您的宝贵意见" dmbind={PageDM.textarea.dmbind}></textarea>
                        </Formitem>
                        <div className="clear"></div>
                        <p>请留下您的邮箱，我们会第一时间给您答复。</p>
                        <Formitem dmbind={PageDM.email.dmbind}>
                            <Input placeholder={PageDM.email.placeholder} dmbind={PageDM.email.dmbind}/>
                        </Formitem>
                        <Button value="确认提交" className="ucs-btn-confirm" onclick={PageDM.feedback.confirmBack}/>
                    </div>
                </Layer>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('main'));